About Web page animation with floating boxes

Adobe GoLive Dynamic HTML (DHTML) animation tools let you create full-scale animations to maximize the visual impact of your pages. You create DHTML animations by placing images, text and other objects in floating boxes and using the TimeLine editor to control movement of the floating boxes.

You can move objects along linear, curved, or random zig-zag animation paths. You can hide them temporarily and change their stacking order. By combining all those features, you can produce amazing visual effects--for example, you can display two items that seem to revolve around each other. For information on showing and hiding floating boxes see Show Hide.

You use the TimeLine Editor to set the keyframes and paths for animated objects.

Before using the TimeLine Editor, you need to understand some basic animation concepts:

Scenes Enable Web authors to include multiple animations in the same Web page. All scenes share the same document and TimeLine Editor windows. You can create multiple scenes for each page and have them play back automatically (default), trigger them using scripted actions, or provide buttons for the viewer to click.

Frames Are the individual pictorial units of an animation. As used in connection with video display systems, frames are images that are played back in a rapid sequence to create a visual effect of motion. The number of frames per second (FPS) controls the animation's playback speed. The more frames per second you assign to an animation, the smoother the impression of fluid motion. However, if you exceed the capabilities of the viewer's computer, frames will be skipped.

Keyframes Mark points on the time track of an animation sequence at which some specific change occurs. These changes include changes in direction within the animation path as well as modifications of general properties, such as visibility and stacking order. For each keyframe, you can control the position of the associated floating box by dragging it to the desired location in the document window. Also, the distance between two keyframes determines the playback speed--the shorter the distance, the faster the animation will play back and vice versa.

Time tracks Let you insert keyframes in a dedicated time track for each floating box and adjust the timing and location. Each single track accepts multiple keyframes, which you can place where you want.

Actions Are ready-to-use scripts that you can use with the TimeLine Editor, rollover buttons, links, and form elements. Actions allow you to add sound, trigger the playback of scenes, dynamically change the content of images, and control other processes in the browser window. You define actions in the Action Inspector or the Actions palette.

To animate multiple objects on the same page, you use multiple floating boxes. As you add floating boxes, Adobe GoLive stacks them in the order you insert them and adds a new time track in the TimeLine Editor. You animate each floating box separately by inserting keyframes in its time track and positioning the floating box in the document window.

The time track in the TimeLine Editor represents the motion of a floating box over time (always from left to right), not the direction of motion in the document window. You determine the direction of motion by clicking all keyframes successively and dragging the floating box to a new position within the document window. For example, by selecting the first keyframe in a time track and dragging the floating box to the right edge of the window, you specify that the animation is to start from the right side of the browser window. When you preview the animation, don't be confused by the opposing directions of motion in the two windows.

Adjusting the stacking order of floating boxes lets you to set how floating boxes move over other floating boxes on the page. See Using stacking order to simulate relative motion.

Floating Boxes > About Web page animation with floating boxes